import React from 'react';
import {Layout, Collapse, Input, Divider} from 'antd';
import {inject, observer} from 'mobx-react';

import Style from './Style';
import Position from './Position';

const {Sider} = Layout;
const {Panel} = Collapse;
const {TextArea} = Input;

@inject ('editorStore')
@observer
export default class PgaeProperty extends React.Component {
  changeInput = e => {
    const {changeActive} = this.props.editorStore;

    const {value, dataset} = e.target;
    // console.log(value,index,dataset);
    changeActive (value.replace (/\n/gm, '<br>'), dataset);
  };

  render () {
    const {htmlBody} = this.props.editorStore;
    const currentIndex = htmlBody.findIndex (item => item.active);
    let currentHtmlBody = null;

    if (currentIndex > -1) {
      currentHtmlBody = htmlBody[currentIndex];
    }
    if (!currentHtmlBody) {
      return <Sider className="page-editor-property" width={300}>11</Sider>;
    }
    return (
      <Sider className="page-editor-property" width={300}>
        <Collapse defaultActiveKey={['1', '2', '3']}>
          <Panel header="文本" key="1">
            <Position />
            <Divider />
            <Style />
            <Divider />
            <TextArea
              rows={2}
              defaultValue={currentHtmlBody.content.text}
              data-name="content"
              data-key="text"
              onChange={e => {
                this.changeInput (e);
              }}
            />
          </Panel>
        </Collapse>
      </Sider>
    );
  }
}
